<template>
  <el-dialog
    ref="wkDialog"
    :visible="visible"
    :append-to-body="true"
    title="打卡记录列表"
    width="1200px"
    @close="close">
    <div class="crm-container">
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        :height="tableHeight"
        use-virtual
        highlight-current-row
        class="n-table--border el-table-header--white"
        stripe
        border
        show-summary
        style="width: 100%">
        <el-table-column
          label="日期"
          align="center"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.year + "-" + scope.row.month + '-' + scope.row.clockDay }}
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.fieldName"
          :label="item.name"
          :min-width="item.width"
          align="center"
          show-overflow-tooltip/>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  hrmDingtalkAttendanceClockQueryAPI
} from '@/api/hrm/dingtalkAttendance'

export default {
  name: 'DingtalkIndex',
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    employeeId: {
      type: Number,
      require: true
    },
    year: {
      type: Number,
      require: true
    },
    month: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      loading: false, // 加载动画
      tableHeight: document.documentElement.clientHeight - 350, // 表的高度
      list: [],
      fieldList: [],
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 50],
      total: 0
    }
  },
  mounted() {
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 350
    }
    this.getFieldList()
    this.refreshList()
  },
  methods: {
    /**
     * 搜索
     */
    searchClick(search) {
      this.search = search
      this.refreshList()
    },

    /**
     * 获取表头展示字段
     */
    getFieldList() {
      this.fieldList = [
        { fieldName: 'name', name: '姓名', sortable: '', width: 80 },
        { fieldName: 'position', name: '职位', sortable: '', width: 80 },
        { fieldName: 'punchInTime', name: '上班打卡时间', sortable: '', width: 80 },
        { fieldName: 'punchOutTime', name: '下班打卡时间', sortable: '', width: 80 },
        { fieldName: 'workOvertimeHours', name: '加班时长', sortable: '', width: 80 },
        { fieldName: 'workOvertimePay', name: '加班费', sortable: '', width: 80 }
      ]
    },

    /**
     * 刷新
     */
    refreshList() {
      this.getFieldList()
      this.handleCurrentChange(1)
    },

    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },

    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    /**
     * 列表数据
     */
    getList() {
      this.loading = true
      const params = {
        page: this.currentPage,
        limit: this.pageSize,
        pageType: 1,
        employeeId: this.employeeId,
        year: this.year,
        month: this.month
      }
      hrmDingtalkAttendanceClockQueryAPI(params)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.totalRow
          if (res.data.totalRow && Math.ceil(res.data.totalRow / this.pageSize) < this.currentPage && this.currentPage > 1) {
            this.currentPage = this.currentPage - 1
            this.getList()
          } else {
            this.total = res.data.totalRow
            this.loading = false
          }

          this.$nextTick(() => {
            const warpDom = document.querySelector('.el-dialog__body').querySelector('.el-table__body-wrapper')
            warpDom.scrollTop = 1
            if (warpDom.scrollLeft != 0) {
              warpDom.scrollLeft = warpDom.scrollLeft - 1
            }
          })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.dingtalk-index {
  .xr-header {
    /deep/ .xr-header__ft {
      top: 0;
      line-height: 34px;
    }
  }

  /deep/.xr-table-header {
    border-bottom: 1px solid $xr-border-color-base;
    .xr-table-header__body {
      padding: 0;
    }
  }
  .search-button {
    border: none;

    &.is-select {
      background: $xr-color-primary;
      color: white;
    }
  }

  /deep/ .el-table .cell {
    white-space: pre-line;
  }

  /deep/ .el-tabs {
    .el-tabs__header {
      margin-bottom: 0;
    }

    .el-tabs__item {
      color: #42526E;
      font-weight: bold;
    }
  }

  .tab-pane-num {
    background-color: #DFE1E6;
    border-radius: 10px;
    color: #42526E;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
  }

  .table-more {
    cursor: pointer;
    &:hover {
      color: $xr-color-primary
    }
  }
}
</style>
